<script setup>
import { appStore } from '@/sotre/modules/app';

const { userInfo } = toRefs(appStore());
const $get = inject('$get');
const $post = inject('$post');

const tabs = ref([]);
const activeTab = ref(0);
const list = ref([]);
const active = ref(0);
const member = ref({});

const phone = computed(() => {
    if (userInfo.value.phone) {
        return userInfo.value.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');
    }
    return '--';
});

const money = computed(() => {
    if (list.value.length > 0) {
        return list.value[active.value].price.toFixed(2);
    }
    return '0.00';
});

const des = computed(() => {
    if (member.value.order) {
        return member.value.order.title;
    }
    return '您暂未开通，购买立项权益';
});

const disabled = computed(() => {
    if (!member.value.order) return false;
    else if (member.value.memberPackage && member.value.memberPackage.length > 0) {
        const a = list.value[active.value];
        const o = member.value.memberPackage[member.value.memberPackage.length - 1];

        if (a.level > o.level) return false;
        else if (a.level === o.level && a.subLevel >= o.subLevel) return false;
        return true;
    }
    return true;
});

$get('/platform/EnterpriseUser/getNormalMember').then(res => {
    member.value = res.data;
});

$get('/platform/memberPackage/queryList?pageIndex=1&pageSize=9999').then(res => {
    const set = new Set();
    res.rows.forEach(item => {
        const key = `${item.title}-${item.level}`;
        if (!set.has(key)) {
            set.add(key);
            tabs.value.push({
                title: item.title,
                level: item.level,
                children: res.rows.filter(i => i.title === item.title && i.level === item.level),
            });
        } else {
            set.add(key);
        }
    });
    list.value = tabs.value[activeTab.value].children;
});

function change(e) {
    activeTab.value = e.index;
    active.value = 0;
    list.value = tabs.value[activeTab.value].children;
}

function getMoney(item) {
    if (list.value.length > 0) {
        return (item.price / item.month).toFixed(2);
    }
    return '0.00';
}

function buy() {
    if (disabled.value) return;
    if (!userInfo.value.currEnterpriseByCache.main) {
        return uni.showToast({
            title: '您不是当前企业主账号，暂无权限购买',
            icon: 'none',
            duration: 2000,
        });
    }

    uni.showLoading({
        title: '支付中...',
    });
    const data = {
        preOrderId: member.value.order?.id || '',
        openid: userInfo.value.wxOpenid,
        memberId: list.value[active.value].id,
        type: getType(),
    };
    // #ifdef MP-WEIXIN || APP-PLUS
    $post('/platform/memberPackage/jsapi/buy', data).then(res => {
        console.log(res);
        uni.requestPayment({
            ...res.data.pay,
            success: () => {
                uni.hideLoading();
                uni.showToast({
                    title: '支付成功',
                    icon: 'success',
                });
                uni.redirectTo({
                    url: '/pages/my/components/order',
                });
            },
            fail: e => {
                console.log(e);
                uni.hideLoading();
                uni.showToast({
                    title: '支付失败',
                    icon: 'none',
                });
            },
        });
    });
    // #endif

    // #ifdef H5
    // $post('/platform/memberPackage/h5/buy', data).then(res => {
    //     console.log(res);
    // });
    uni.hideLoading();
    uni.showToast({
        title: '暂不支持当前环境支付，请前往微信小程序支付',
        icon: 'none',
        duration: 2000,
    });
    // #endif
}

function getType() {
    if (!member.value.order) return 1;
    else if (member.value.memberPackage && member.value.memberPackage.length > 0) {
        const a = list.value[active.value];
        const o = member.value.memberPackage[member.value.memberPackage.length - 1];
        if (a.level == o.level && a.subLevel == o.subLevel) return 2;
        else if (a.level == o.level && a.subLevel > o.subLevel) return 3;
        else if (a.level > o.level) return 3;
        else return 1;
    }
    return 1;
}
</script>

<template>
    <div class="vip">
        <u-navbar title="会员中心" placeholder autoBack></u-navbar>
        <div class="user">
            <wd-img
                :src="userInfo?.avatar || '/static/image/fox.png'"
                width="40"
                mode="widthFix"
                round
            ></wd-img>
            <div class="info">
                <div class="row">
                    <span class="name">{{ userInfo.name }}</span>
                    <div class="cor">({{ phone }})</div>
                </div>
                <div class="des">{{ des }}</div>
            </div>
        </div>
        <u-tabs :list="tabs" keyName="title" lineColor="#f9712e" @change="change"></u-tabs>
        <div class="card">
            <wd-img src="/static/my/1.png" width="100%" mode="widthFix" radius="12"></wd-img>
        </div>
        <scroll-view class="list" scroll-x="true">
            <view
                class="item"
                :class="{ active: active === index }"
                v-for="(item, index) in list"
                :key="item.id"
                @click="active = index"
            >
                <div class="title">{{ item.packageApps[0].peopleNum }}人团队</div>
                <div class="des">{{ item.description }}</div>
                <span>{{ item.month }}个月</span>
                <div class="price">
                    <text>￥</text>
                    <div class="money_box">
                        <div class="money">{{ getMoney(item) }}</div>
                        <span>/月</span>
                    </div>
                </div>
            </view>
        </scroll-view>
        <div class="bottom">
            <div class="price">
                <text>￥</text>
                <div class="money_box">
                    <div class="money">{{ money }}</div>
                </div>
            </div>
            <button class="btn" :class="{ disabled: disabled }" @click="buy">立即购买</button>
        </div>
    </div>
</template>

<style scoped lang="scss">
.vip {
    .bottom {
        background: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        padding: 15px 20px 30px 20px;
        width: calc(100% - 40px);
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        .btn {
            background: #010101;
            color: #cee96c;
            padding: 5px 20px;
            border-radius: 50px;
            margin: 0;
            line-height: 1.5;
            &:active {
                background: #242424;
            }
        }
        .disabled {
            opacity: 0.5;
        }
        .price {
            display: flex;
            align-items: center;
            color: red;
            font-size: 12px;
            .money_box {
                display: flex;
                align-items: flex-end;
                font-size: 14px;
            }
            .money {
                font-size: 25px;
                font-weight: bold;
            }
        }
    }
    .list {
        white-space: nowrap;
        width: calc(100% - 40px);
        display: flex;
        padding: 0px 20px;
        .item {
            display: inline-block;
            width: 28%; // 设置固定宽度或最小宽度
            padding: 10px;
            flex-shrink: 0; // 防止被压缩
            background: #f2f7e6;
            border: 1px solid #fff;
            margin-right: 10px;
            border-radius: 8px 50px 8px 8px;
            &:last-child {
                margin-right: 0;
            }
            .title {
                font-weight: bold;
            }
            .des {
                font-size: 12px;
                color: #747474;
                margin: 12px 0;
            }
            .price {
                display: flex;
                align-items: center;
                color: red;
                font-size: 12px;
                padding: 15px 0;
                .money_box {
                    display: flex;
                    align-items: flex-end;
                    font-size: 14px;
                }
                .money {
                    font-size: 25px;
                    font-weight: bold;
                }
            }
        }
        .active {
            background: #fff;
            border-color: #f9712e;
        }
    }
    .card {
        margin: 10px 20px;
        background: #fff;
    }
    .user {
        border-radius: 10px;
        margin: 10px 15px 12px 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        .info {
            .row {
                display: flex;
                align-items: center;
                gap: 5px;
            }
            .name {
                font-weight: 600;
            }
            .cor {
                font-size: 11px;
                color: #2b2b2b;
            }
        }
        .des {
            font-size: 12px;
            color: #999;
        }
    }
}
</style>
